<!--
 * @author guojiteng
 -->
<template>
  <div id="choose-qs" v-loading="menuLoading">
    <el-tree
      ref="qsTree"
      class="qs-tree"
      :data="treeData"
      :props="defaultProps"
      :default-expanded-keys="['-1']"
      show-checkbox
      highlight-current
      :check-strictly="isSelsct"
      node-key="id"
      @check="treeCheckChange"
    >
      <span slot-scope="{ node, data }" class="custom-tree-node">
        <span>{{ node.label }}</span>
      </span>
    </el-tree>
  </div>
</template>
<script>
import { getClassifyTree } from '../api/rush'
export default {
  name: 'ChooseQs',
  props: {
    // 是否可以多选 此时传出去的是id与name字符串分割集合
    isSelsct: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      menuLoading: false,
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'classifyName'
      }
    }
  },
  watch: {},
  created() {
    this.getMenu()
  },
  methods: {
    treeCheckChange(data, node) {
      if (!this.isSelsct) {
        this.$nextTick(() => {
          this.$refs.qsTree.setCheckedKeys([])
          this.$refs.qsTree.setChecked(data, true)
        })
      }
    },
    /*
      params: 无
      return:无
      function:获取权限树结构
    */
    getMenu() {
      this.menuLoading = true
      return new Promise((resolve, reject) => {
        getClassifyTree({ classifyType: 'JNZQFL03' })
          .then((response) => {
            this.menuLoading = false
            this.treeData = response.data.data
          })
          .catch((error) => {
            reject(error)
            this.menuLoading = false
          })
      })
    },

    /**
     * 保存提交数据
     */
    saveData() {
      const checkVal = this.$refs.qsTree.getCheckedNodes()
      const halfVal = this.$refs.qsTree.getHalfCheckedNodes()
      const valArr = [...halfVal, ...checkVal]
      let menuIds = ''
      let menuName = ''
      console.log('valArr', valArr)
      if (this.isSelsct) {
        menuIds = checkVal
          .map((item) => {
            return item.id
          })
          .toString()
        menuName = checkVal
          .map((item) => {
            return item.classifyName
          })
          .toString()
      } else {
        if (valArr.length > 0) {
          menuIds = valArr.map((item) => {
            return item.id
          })[valArr.length - 1]

          menuName = valArr.map((item) => {
            return item.classifyName
          })[valArr.length - 1]
        }
      }
      const obj = {
        menuIds,
        menuName
      }
      this.$emit('subQs', obj)
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss">
#choose-qs {
  height: 500px;
  overflow: hidden;
  .qs-tree {
    height: 100% !important;
    overflow: auto;
  }
  .el-tree-node__content {
    margin-top: 5px;
  }
  .tag {
    font-size: 12px;
    border-radius: 4px;
    padding: 2px 4px;
    color: #fff;
    &.gh {
      color: #ff7474;
      border: 1px solid #ff7474;
    }
    &.qy {
      color: #2fbcfb;
      border: 1px solid #2fbcfb;
    }
    &.bm {
      color: #ffa11c;
      border: 1px solid #ffa11c;
    }
  }
  .el-tree-node__expand-icon.expanded {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  .el-icon-caret-right:before {
    content: '\E7A0';
    font-size: 14px;
  }
  .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
    content: '\E7A2';
    font-size: 14px;
  }
}
</style>
